<svg style="width: 100%;" viewBox="0 0 {width} {height}">
  <g transform="translate(0, 40)">
    
    <!-- UMAP -->
    <g transform="translate({(columnWidth + columnPadding) * 1}, 0)">
    <!-- mixed4c-layout.jpg -->
      <image xlink:href="assets/images/mixed4c-layout.jpg" width={columnWidth} height={columnWidth}/>
      <!-- {#each layoutData as point}
        <g transform="translate({point[1] * columnWidth}, {point[0] * columnWidth})">
          <rect fill="#999" fill-opacity=0.5 width=2 height=2></rect>
        </g>
      {/each} -->
      <!-- {#each webData as icon}
          <rect stroke="grey"  x={icon.y * iconWidth} y={icon.x * iconWidth} width={iconWidth} height={iconWidth}/>
      {/each} -->
    </g>

    {#each inputs as input, i}
      <!-- Input images -->
      <g transform="translate(0, {(inputWidth + 20) * i})">
        <!-- Image -->
        <image xlink:href="assets/images/{input.id}.jpg" width={inputWidth} height={inputWidth}/>
        <!-- Grid -->
        <g transform="translate({inputWidth + inputPadding}, 0)">
          <image xlink:href="assets/images/{input.id}.jpg" width={inputWidth} height={inputWidth}/>
          {#each range(numCells) as y}
            {#each range(numCells) as x}
              <rect stroke="white" fill="#aaa" fill-opacity=0.6 stroke-width=2 x={x * (cellWidth + cellPadding)} y={y * (cellWidth + cellPadding)} width={cellWidth} height={cellWidth}/>
            {/each}
          {/each}
        </g>

        
        <!-- Annotation -->
        <rect fill="none" stroke="black" stroke-width=2 x={(inputWidth + inputPadding) * 1 + input.x * (cellWidth + cellPadding)} y={input.y * (cellWidth + cellPadding)} width={cellWidth} height={cellWidth}/>
        <path 
          fill="none"
          stroke="black"
          d="M{(inputWidth + inputPadding) * 1 + input.x * (cellWidth + cellPadding) + cellWidth},{input.y * (cellWidth + cellPadding) + cellWidth / 2} L{(inputWidth + inputPadding) * 2 - 10},{input.y * (cellWidth + cellPadding) + cellWidth / 2} m-5,-5 l5,5 l-5,5"
        />
        <g transform="translate({(inputWidth + inputPadding) * 2}, {input.y * (cellWidth + cellPadding)})">
          <text font-size=9 dy={cellWidth / 1.5}>
          [{(Math.random() + "").slice(0, 5)}, {(Math.random() + "").slice(0, 5)}, …]
          </text>
        </g>

        <!-- Divider line -->
        {#if i !== inputs.length - 1}
          <line stroke-dasharray="2 2" y1={inputWidth + 10} y2={inputWidth + 10} x2={(inputWidth + inputPadding) * 3 - inputPadding} stroke="#ddd"/>
        {/if}

      </g>
      <path
        fill="none" 
        stroke="black"
        d="{pointerPath(columnWidth, input.y * (cellWidth + cellPadding) + cellWidth / 2 + (inputWidth + 20) * i, (columnWidth + columnPadding) + columnWidth * input.px, columnWidth * input.py)}"
      />
    {/each}



    <!-- Icons -->
    <g transform="translate({(columnWidth + columnPadding) * 2}, 0)">
      <image opacity={webData.length > 0 ? 1 : 0} xlink:href={renderURL} width={columnWidth} height={columnWidth}/>
      {#each webData as icon}
          <rect stroke="none" fill="white" fill-opacity={+icon.n > 50 ? 0 : 1 }  x={icon.y * iconWidth} y={icon.x * iconWidth} width={iconWidth} height={iconWidth}/>
      {/each}
      {#each range(numIcons) as y}
        {#each range(numIcons) as x}
          <rect stroke="#ddd" stroke-opacity=0.5 fill="none" stroke-width=1 x={x * iconWidth} y={y * iconWidth} width={iconWidth} height={iconWidth}/>
        {/each}
      {/each}
    </g>

    <!-- Annotation -->
    <rect fill="none" stroke="black" stroke-width=2 x={(columnWidth + columnPadding) * 1 + iconHighlight.x * iconWidth} y={iconHighlight.y * iconWidth} width={iconWidth} height={iconWidth}/>
    <path fill="none" stroke="black" d="M{(columnWidth + columnPadding) * 1 + iconHighlight.x * iconWidth + iconWidth / 2},{iconHighlight.y * iconWidth}l0,-30 l{columnWidth + columnPadding},0 l0,25 m-5,-5 l5,5 l5,-5" />
    <rect fill="none" stroke="black" stroke-width=2 x={(columnWidth + columnPadding) * 2 + iconHighlight.x * iconWidth} y={iconHighlight.y * iconWidth} width={iconWidth} height={iconWidth}/>
  </g>
</svg>

<script>
import {range} from "d3-array";
import {load} from 'lucid-components';

export default {
  components: {
  },
  data() {
    return {
      width: 1000,
      height: 380,
      columnPadding: 50,
      inputPadding: 20,
      numCells: 6,
      cellPadding: 0,
      numIcons: 10,
      iconHighlight: {x: 2, y: 0},
      layoutData: [],
      webData: [],
      webURL: "https://storage.googleapis.com/distill-2019-activation-atlas/build/process/web/web--grid_size=10--layout=50_0.05_cosine--class_filter=None--filter=30000--layer=mixed4c--model=InceptionV1--sample_images=1000000--sample_type=random.json",
      dataURL: "https://storage.googleapis.com/distill-2019-activation-atlas/build/process/layout_data/layout_data--layout=50_0.05_cosine--class_filter=None--filter=30000--layer=mixed4c--model=InceptionV1--sample_images=1000000--sample_type=random.json",
      renderURL: "https://storage.googleapis.com/distill-2019-activation-atlas/build/process/render/render--x=0--y=0--tries=4--alpha=False--tile_size=10--whiten=true--steps=2048--icon_size=80--grid_size=10--layout=50_0.05_cosine--class_filter=None--filter=30000--layer=mixed4c--model=InceptionV1--sample_images=1000000--sample_type=random.jpg",
      inputs: [
        { id: "dogcat", x:2, y:1, px:.25, py:.033 },
        { id: "dog", x:3, y:3, px:.28, py:.066 },
        { id: "ocean", x:2, y:3, px:.25, py:.85 },
      ]
    }
  },
  computed: {
    columnWidth: ({width, columnPadding}) => (width + columnPadding) / 3 - columnPadding,
    inputWidth: ({columnWidth, inputPadding}) => (columnWidth + inputPadding) / 3 - inputPadding,
    cellWidth: ({inputWidth, numCells, cellPadding}) => (inputWidth + cellPadding) / numCells - cellPadding,
    iconWidth: ({columnWidth, numIcons}) => columnWidth / numIcons,
  },
  oncreate() {
    console.log("loading")
    const {dataURL, webURL} = this.get();
    load(webURL).then(response => {
      this.set({
        // layoutData: responses[0].slice(0, 10000),
        webData: response
      })
    });
  },
  helpers: {
    range: range,
    pointerPath: (sx, sy, ex, ey) => {
      return `M${sx},${sy} L${sx + 10},${sy} L${sx + 40},${ey} L${ex},${ey} m-5,-5 l5,5 l-5,5`;
    }
  }
}

</script>

<style>
/* path {
  shape-rendering: crispEdges;
} */
</style>